<template>
  <el-drawer
    :model-value="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :with-header="false"
    :before-close="handleClose"
    :size="300"
  >
    <section class="drawer-container">
      <section class="config-wrap">
        <h3 class="title">
          导航模式
        </h3>
        <section class="layout-wrap">
          <section
            v-for="item of layoutList"
            :key="item"
            :class="[
              'layout__item',
              item
            ]"
            @click="changeLayout(item)"
          >
            <span
              v-if="layout===item"
              class="checked-wrap"
            >
              <base-svg-icon
                icon-class="icon-check"
              />
            </span>
          </section>
        </section>
        <el-divider />
        <h3 class="title">
          顶部导航背景色
        </h3>
        <section class="colors-wrap">
          <section
            v-for="colorInfo of navbarBackgroundColors"
            :key="colorInfo.key"
            class="color-item"
            :style="{background: colorInfo.background}"
            @click="changeBackground(colorInfo, 1)"
          >
            <span
              v-if="navbarBackgroundInfo.key === colorInfo.key"
              :class="[
                'checked-wrap',
                colorInfo.key === 'default' ? 'default' : 'dark'
              ]"
            >
              <base-svg-icon
                icon-class="icon-check"
              />
            </span>
          </section>
        </section>
        <el-divider />
        <h3 class="title">
          侧边导航背景色
        </h3>
        <section class="colors-wrap">
          <section
            v-for="colorInfo of sidebarBackgroundColors"
            :key="colorInfo.key"
            class="color-item"
            :style="{background: colorInfo.background}"
            @click="changeBackground(colorInfo, 2)"
          >
            <span
              v-if="sidebarBackgroundInfo.key === colorInfo.key"
              :class="[
                'checked-wrap',
                colorInfo.key === 'default' ? 'default' : 'dark'
              ]"
            >
              <base-svg-icon
                icon-class="icon-check"
              />
            </span>
          </section>
        </section>
        <el-divider />
        <h3 class="title">
          系统颜色
        </h3>
        <el-form :label-width="80">
          <el-row>
            <el-col
              v-for="(value, key) in themeColors"
              :key="key"
              :span="12"
            >
              <el-form-item :label="`${key}:`">
                <el-color-picker
                  v-model="themeColors[key]"
                  :predefine="predefineColors"
                  @change="elColorChangeHandle"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-divider />
        <h3 class="title">
          字体颜色
        </h3>
        <el-form :label-width="90">
          <el-row>
            <el-col
              v-for="(value, key) in textColors"
              :key="key"
              :span="12"
            >
              <el-form-item :label="`${key}:`">
                <el-color-picker
                  v-model="textColors[key]"
                  :predefine="predefineColors"
                  @change="elColorChangeHandle"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-divider />
        <h3 class="title">
          内容区域
        </h3>
        <section>
          <section class="config-item">
            <span>使用面包屑</span>
            <el-switch
              v-model="useBreadcrumb"
              @change="changeHandle($event, 1)"
            />
          </section>

          <section class="config-item">
            <span class="config-item__label">
              使用多导航标签
              <span class="tip-btn-wrap">
                <el-popover
                  placement="top-start"
                  :width="260"
                  trigger="hover"
                  effect="dark"
                >
                  <section class="popover-wrap">
                    <section class="popover-wrap__title">多导航标签</section>
                    <section class="popover-wrap__content">
                      特殊配置请在 src/config/multiple-nav/index.ts 中配置
                    </section>
                  </section>
                  <template #reference>
                    <el-icon><info-filled /></el-icon>
                  </template>
                </el-popover>
              </span>
            </span>
            <el-switch
              v-model="useMultipleNav"
              @change="changeHandle($event, 2)"
            />
          </section>

          <section class="config-item">
            <span>显示顶部导航</span>
            <el-switch
              v-model="useHeader"
              @change="changeHandle($event, 4)"
            />
          </section>

          <section class="config-item">
            <span>显示左侧导航</span>
            <el-switch
              v-model="useSidebar"
              :disabled="layout === 'top'"
              @change="changeHandle($event, 5)"
            />
          </section>
        </section>
      </section>
      <section class="copy-wrap">
        <el-divider />
        <section class="config-warning">
          <span style="margin-right: 8px;font-size: 16px;">
            <base-svg-icon icon-class="icon-notice" />
          </span>
          <div>
            配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改配置文件 app.config.js。
          </div>
        </section>
        <section class="btn-copy">
          <el-button
            v-blur
            plain
            class="btn"
            :icon="DocumentCopy"
            @click="doCopyHandle"
          >
            拷贝设置
          </el-button>
        </section>
      </section>
    </section>
  </el-drawer>
</template>
<script lang="ts">
import {
  ref, defineComponent, watch, reactive, toRefs,
} from 'vue';
import type { PropType } from 'vue';

import { DocumentCopy, InfoFilled } from '@element-plus/icons-vue';
import { ElMessage } from 'hive-plus';

import config from '../../../../app.config';

import { useAppStore } from '@/store/app';
import { copyHandle } from '@/utils/index';
import { setThemeColor, setTextColor } from '@/utils/reset-el-color';

  type colorsType = {
    [key: string]: string
  }

  interface InterfaceState {
    layout: string,
    layoutList: string[],

    navbarBackgroundInfo: TypeObject,
    navbarBackgroundColors: TypeObject[],
    sidebarBackgroundInfo: TypeObject,
    sidebarBackgroundColors: TypeObject[],
    themeColors: colorsType,
    textColors: colorsType
  }

export default defineComponent({
  name: 'SettingDrawer',
  components: {
    InfoFilled,
  },
  props: {
    visible: {
      type: Boolean as PropType<false | true>,
      default: false,
    },
  },
  emits: {
    'update:visible': null,
  },
  setup(props, ctx) {
    const appStore = useAppStore();
    const useBreadcrumb = ref(appStore.useBreadcrumb);
    const useMultipleNav = ref(appStore.useMultipleNav);
    const useKeepAlive = ref(appStore.useKeepAlive);
    const useHeader = ref(appStore.useHeader);
    const useSidebar = ref(appStore.useSidebar);

    const predefineColors = ref([
      '#007AF5',
      '#E22525',
      '#F76600',
      '#FAAB0C',
      '#FFD400',
      '#00D18B',
      '#00BCD4',
      '#0F76F5',
      '#455FE4',
      '#9746E8'
    ]);

    const state:InterfaceState = reactive({
      layout: 'side',
      layoutList: ['side', 'top', 'mix'],

      navbarBackgroundInfo: {
        key: 'default',
        background: '#F4F7FC',
      },
      navbarBackgroundColors: [
        {
          key: 'default',
          background: '#F4F7FC',
        },
        {
          key: 'blue', // 海蓝色
          background: 'linear-gradient(90.08deg, #0F76F5 0%, #3F91F7 100%)',
        },
        {
          key: 'cerulean', // 天蓝色、蔚蓝色
          background: 'linear-gradient(90.08deg, #4369EB 0%, #3D67D2 100%)',
        },
        {
          key: 'indigo', // 靛蓝色
          background: 'linear-gradient(90.08deg, #33476F 0%, #395A84 100%)',
        },
        {
          key: 'orange', // 橘黄色
          background: 'linear-gradient(90.27deg, #F76600 0%, #FA7D00 100%)',
        }
      ],
      sidebarBackgroundInfo: {
        key: 'default',
        background: 'radial-gradient(155.32% 100% at 0% 0%, #F7FAFD 0%, #FBFCFE 25.86%, #FFFFFF 100%)',
      },
      sidebarBackgroundColors: [
        {
          key: 'default',
          background: 'radial-gradient(155.32% 100% at 0% 0%, #F7FAFD 0%, #FBFCFE 25.86%, #FFFFFF 100%)',
        },
        {
          key: 'blue',
          background: `radial-gradient(102.22% 24.02% at 100% 0%, rgba(36, 145, 255, 0.2) 0%,
              rgba(0, 122, 245, 0) 100%),
              radial-gradient(107.5% 39.69% at 50% 100%, #3F91F7 0%, rgba(0, 127, 255, 0) 100%),
              radial-gradient(62.73% 62.73% at 107.5% 37.27%, #2478E4 0%, #007AF5 100%)`,
        },
        {
          key: 'cerulean',
          background: `radial-gradient(100% 31.53% at 100% 0%, #3A5EC9 0%, rgba(50, 85, 189, 0) 100%),
            radial-gradient(107.5% 39.69% at 50% 100%, #4664BF 0%, rgba(65, 97, 193, 0) 100%),
            radial-gradient(86.39% 69.26% at 136.39% 30.74%, #3A58B7 0%, #3154BC 100%)`,
        },
        {
          key: 'indigo',
          background: `radial-gradient(88.33% 20.76% at 96.39% 1.31%, #2B4D7C 0%, rgba(44, 58, 96, 0) 100%),
            radial-gradient(107.5% 39.69% at 50% 100%, #2B4D7C 0%, rgba(44, 58, 96, 0) 100%),
            radial-gradient(322.5% 75.78% at 119.17% 24.22%, #2B4D7C 0%, #2C3A60 100%)`,
        },
        {
          key: 'orange',
          background: `radial-gradient(120.28% 28.26% at 100% 1.63%, #FA7D01 0%, rgba(247, 102, 0, 0) 100%),
            radial-gradient(107.5% 39.69% at 50% 100%, #FA7D01 0%, rgba(247, 102, 0, 0) 100%),
            radial-gradient(65% 70.89% at 115% 29.11%, #F27B2C 0%, #F76600 100%)`,
        }
      ],
      themeColors: {
        ...config.themeColors,
      },
      textColors: {
        ...config.textColors,
      },
    });

    /**
       * @description: switch按钮切换事件
       * @param {*} val switch按钮切换值
       * @param {*} type switch按钮类型
       *                 1: 使用面包屑
       *                 2: 使用多导航标签
       *                 3: 使用keep-alive控制路由
       */
    const changeHandle = (val:any, type:number) => {
      if (type === 2) {
        appStore.setMultipleNavStatus(val);
      } else if (type === 4) {
        appStore.setHeaderStatus(val);
      } else if (type === 5) {
        appStore.setSidebarStatus(val);
      } else {
        appStore.setBreadcrumbStatus(val);
      }
    };

    /**
       * @description: 改变顶部导航或者侧边栏背景色
       * @param {val} string
       * @return {type} number 1: 改变顶部导航别景色 2: 改变侧边栏背景色
       */
    const changeBackground = (val:TypeObject, type?: number) => {
      if (type === 1) {
        state.navbarBackgroundInfo = val;
        appStore.setNavbarBackground(val.key);
      } else if (type === 2) {
        state.sidebarBackgroundInfo = val;
        appStore.setSidebarBackground(val.key);
      }
    };

    watch(
      [
        () => appStore.useBreadcrumb,
        () => appStore.useMultipleNav,
        () => appStore.useKeepAlive
      ],
      ([useB, useM, useK]) => {
        useBreadcrumb.value = useB;
        useMultipleNav.value = useM;
        useKeepAlive.value = useK;
      },
      {
        immediate: true,
      }
    );

    return {
      ...toRefs(state),
      useBreadcrumb,
      useMultipleNav,
      useKeepAlive,
      useHeader,
      useSidebar,
      changeHandle,
      DocumentCopy,
      changeLayout: (val:string) => { // 改变layout
        state.layout = val;
        appStore.setLayout(val);
      },
      changeBackground,
      handleClose: () => {
        ctx.emit('update:visible', false);
      },
      doCopyHandle: () => {
        const copyInfo = {
          useBreadcrumb: useBreadcrumb.value,
          useMultipleNav: useMultipleNav.value,
          useKeepAlive: useKeepAlive.value,
          useHeader: useHeader.value,
          useSidebar: useSidebar.value,

          layout: state.layout,
          navbarBackground: state.navbarBackgroundInfo.key,

          sidebarBackground: state.sidebarBackgroundInfo.key,

          themeColors: state.themeColors,
          textColors: state.textColors,
        };
        copyHandle(`export default ${JSON.stringify(copyInfo, null, 2)}`);
        ElMessage({
          message: '拷贝成功，请到 app.config.js 中替换默认配置',
          type: 'success',
        });
      },

      elColorChangeHandle: () => {
        setThemeColor(state.themeColors);
        setTextColor(state.textColors);
      },
      predefineColors,
    };
  },
});
</script>
<style lang="scss" scoped>
.drawer-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  .title {
    margin-bottom: var(--maia-base-space);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: var(--#{$namespace}-text-color-regular);
  }

  .config-wrap {
    height: 100%;
    overflow-y: auto;

    .layout-wrap {
      display: flex;
      align-items: center;

      .layout__item {
        position: relative;
        width: 44px;
        height: 36px;
        margin-right: var(--maia-small-space);
        overflow: hidden;
        cursor: pointer;
        background-color: #f0f2f5;
        border-radius: 4px;
        box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 33%;
          height: 100%;
          content: '';
        }

        &.side::before {
          z-index: 1;
          background-color: #001529;
        }

        &.mix::before {
          background-color: var(--#{$namespace}-color-white);
        }

        &::after {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 25%;
          content: '';
        }

        &.top::after {
          background-color: #001529;
        }

        &.side::after {
          background-color: var(--#{$namespace}-color-white);
        }

        &.mix::after {
          z-index: 1;
          background-color: #001529;
        }

        .checked-wrap {
          position: absolute;
          right: 6px;
          bottom: 4px;
          color: #001529;
        }
      }
    }

    .colors-wrap {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .color-item {
        width: 26px;
        height: 26px;
        margin-right: 10px;
        line-height: 26px;
        text-align: center;
        cursor: pointer;
        border-radius: 2px;
        box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);

        .checked-wrap {
          color: #fff;

          &.default {
            color: #001529;
          }
        }
      }
    }

    .config-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--maia-base-space);

      .config-item__label {
        display: flex;
        align-items: center;

        .tip-btn-wrap {
          margin-left: 8px;
          cursor: pointer;
        }
      }
    }
  }

  .config-warning {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: var(--maia-base-space);
    margin-bottom: var(--maia-base-space);
    font-size: 14px;
    line-height: 20px;
    color: var(--#{$namespace}-text-color-regular);
    word-wrap: break-word;
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 2px;
  }

  .btn-copy {
    margin-bottom: var(--maia-base-space);

    .btn {
      width: 100%;
    }
  }
}

.popover-wrap {
  color: var(--#{$namespace}-color-white);

  .popover-wrap__title {
    font-size: 16px;
    font-weight: 500;
  }

  .popover-wrap__content {
    margin-top: 8px;
    font-size: 14px;

    a {
      color: var(--#{$namespace}-color-white);

      &:hover {
        color: var(--#{$namespace}-color-primary);
      }
    }
  }
}
</style>
